<template>
  <div class="ccui-multifunctional-table-wrapper">
    <el-table
      :data="storageList"
      border
      max-height="99999"
      class="ccui-form-child-table"
      ref="associationList"
      show-summary
      :summary-method="getSummaries"
    >
      <el-table-column
        v-for="(item, i) in tableColumnContractList"
        :label="item.label"
        :type="item.type"
        :align="item.align || 'left'"
        :header-align="item.headerAlign || 'left'"
        :prop="item.prop"
        :fixed="item.fixed"
        :min-width="item.width"
        :key="i"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import jsList from "@/app/inventoryManagement/js";
export default {
  name: "contractList",
  props: {
    storageList: Array
  },
  data() {
    return {
      jsList,
      form: {},
      rules: {},
      tableList: [], //子组件传来的参数
      // 选择合同弹窗组件
      formSearch: {
        pcConcId: "",
        materialsCode: "",
        materialsName: ""
      },
      dialogTableVisibleTextarea: false,
      dialogTableVisible: false, //控制弹窗显示隐藏
      tableDataDialogLeft: [],
      tableDataDialogRight: [],
      lineClampBody: true,
      concChangesDel: [], //主合同变更删除清单
      checkedList: [],
      code: 0,
      count: 0,
      tableColumnContractList: [
        {
          type: "index",
          label: "序号",
          width: "50"
        },
        {
          label: "入库单编号",
          prop: "storageCode",
          width: "200"
        },
        {
          label: "入库单名称",
          prop: "storageName",
          width: "250"
        },
        {
          label: "填报单位",
          prop: "reportInOrgName",
          width: "220"
        },
        {
          label: "供应商",
          prop: "supplierName",
          width: "220"
        },
        {
          label: "分类名称",
          prop: "thirdCategoriesOfName",
          width: "150"
        },
        {
          label: "仓库",
          prop: "warehouseName",
          width: "180"
        },
        {
          label: "入库数量",
          prop: "storageCount",
          width: "140"
        },
        {
          label: "入库金额",
          prop: "storageMoney",
          width: "140",
          align: "right"
        }
      ]
    };
  },
  methods: {
    // 关联入库单确定按钮
    planConfirm(data) {
      console.log("关联入库单选中行==>>", data);
    },
    oninput(row) {
      if (row.settlementCount <= row.count) {
        //正则替换
        //后来调试发现这个函数只能用于字符串，当是数字的时候就会报此错误
        var str = row.settlementCount.toString();
        str = str.replace(/[^\d.]/g, ""); // 保留数字   /[^\d.]/g, ""
        str = str.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
        str = str
          .replace(".", "$#$")
          .replace(/\./g, "")
          .replace("$#$", ".");
        console.log("input值", str);
        return str;
      } else {
        return row.count;
      }
    },
    // 删除行
    chooseContract() {
      this.storageList.forEach((item) => {
        if (item.check == true) {
          this.checkedList.push(item.id);
        }
      });
      this.storageList = this.storageList.filter((item) => item.check != true);
    },
    formSearchHandler() {},
    formSearchChange() {},
    // 列表单选 多选
    handleCheckAllChange(val) {
      if (val.length > 0) {
        val.forEach((item) => {
          item.check = true;
        });
      }
    },
    handleCheckChange(val) {
      if (val.length > 0) {
        val.forEach((item) => {
          item.check = true;
        });
      }
    },
    // 合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              if (column.label == "入库数量" || column.label == "入库金额") {
                return prev + curr;
              }
            } else {
              return prev;
            }
          }, 0);
          if (column.label == "入库数量") {
            sums[index] = sums[index].toFixed(3);
          }
          if (column.label == "入库金额") {
            sums[index] = sums[index].toFixed(2);
          }
        } else {
          sums[index] = "";
        }
      });
      return sums;
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-table th.must > .cell:before {
  content: "*";
  color: #ff1818;
  margin-right: 5px;
}
.relationBox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.relationBox .relationRight {
  display: inline-block;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 5px;
}

.operation-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}
/deep/ .ccui-form .ccui-form-child-table.el-table .el-input .el-input__inner {
  border: 1px solid #ccc;
  border-right: 1px solid #edf2fc;
}

/deep/ .ccui-multifunctional-table-wrapper {
  .el-table td,
  .el-table th.is-leaf {
    border-right: 1px solid #edf2fc !important;
  }
  .ccui-table-footer {
    padding-top: 0 !important;
  }
}
/deep/ .el-table__footer-wrapper {
  margin-top: 0px;
}

/deep/ .el-button.el-button--primary-font-mini {
  padding: 0 15px !important;
}
// 解决表格定位滚动条无法拖动
/deep/ .el-table__fixed-header-wrapper {
  th {
    pointer-events: auto;
  }
}
/deep/ .el-table__fixed,
/deep/.el-table__fixed-right {
  pointer-events: none;
  td {
    pointer-events: auto;
  }
}
/deep/ .elx-table.is--empty .elx-table--empty-placeholder {
  top: 40px !important;
  height: 40px !important;
}

.my-input-sc {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  -webkit-appearance: none;
  background-color: #ffffff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  font-size: inherit;
  outline: none;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
</style>
